<template>
  <li
    class="dropdown"
    :class="{
      // active: oVisible.active,
      show: oShow,
    }"
  >
    <a
      @click="changeVisible('show', true)"
      title="New..."
      href="javascript:void(0);"
    >
      <!-- 插槽 - title -->
      <slot></slot>
      <git-svg class-name="caret-down" path="angle-down"></git-svg>
    </a>

    <div v-if="search" class="dropdown-menu frequent-items-dropdown-menu">
      <div class="frequent-items-dropdown-container">
        <!-- dropdown-sidebar -->
        <div
          class="frequent-items-dropdown-sidebar qa-projects-dropdown-sidebar"
        >
          <ul>
            <li class="dropdown-bold-header">This project</li>
            <li>
              <a class="qa-your-projects-link" href="/dashboard/projects"
                >Your projects</a
              >
            </li>
            <li class>
              <a href="/dashboard/projects/starred">Starred projects</a>
            </li>
            <li class>
              <a href="/explore">Explore projects</a>
            </li>
            <li class="divider"></li>
            <li class="dropdown-bold-header">GitLab</li>
          </ul>
        </div>
        <!-- dropdown-content -->
        <div class="frequent-items-dropdown-content">
          <div>
            <div class="search-input-container d-none d-sm-block">
              <input
                placeholder="Search your projects"
                type="search"
                class="form-control"
              />
              <git-svg
                :class="{ hidden: false }"
                class-name="search-icon s16 ic-search"
                path="search"
              ></git-svg>
            </div>
            <!---->
            <div class="section-header">Frequently visited</div>
            <div class="frequent-items-list-container">
              <ul class="list-unstyled">
                <li class="section-empty">
                  Projects you visit often will appear here
                </li>
                <li class="frequent-items-list-item-container">
                  <a href="/zhaoshengyi/hsedu_mgr" class="clearfix"
                    ><div class="frequent-items-item-avatar-container">
                      <div class="avatar identicon rect-avatar s32 bg2">H</div>
                    </div>
                    <div class="frequent-items-item-metadata-container">
                      <div
                        title="hsedu_mgr"
                        class="frequent-items-item-title js-frequent-items-item-title"
                      >
                        hsedu_mgr
                      </div>
                      <div
                        title="zhaoshengyi / hsedu_mgr"
                        class="frequent-items-item-namespace js-frequent-items-item-namespace"
                      >
                        zhaoshengyi
                      </div>
                    </div></a
                  >
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="dropdown-menu dropdown-menu-right">
      <ul>
        <slot @command="sssss" name="dropdown"></slot>
      </ul>
    </div>
  </li>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from "vue";
import GitSvg from "@/components/common/GitSvg.vue";
export default defineComponent({
  name: "git-dropdown",
  components: {
    [GitSvg.name]: GitSvg,
    "git-dropdown-item": {
      props: {
        divided: {
          type: Boolean,
          default: false,
        },
        disabled: {
          type: Boolean,
          default: false,
        },
        isHeader: {
          type: Boolean,
          default: false,
        },
        command: {
          type: [String, Number, Object],
        },
      },
      template: `
        <li v-if="divided" class="divider"></li>
        <li @click="emitCommand" :class="{
          'dropdown-bold-header': isHeader,
          disabled: disabled
        }">
          <slot></slot>
        </li>
      `,
      setup(props, context) {
        const emitCommand = () => {
          context.emit("command", props.command);
        };
      },
    },
  },
  props: {
    search: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, context) {
    const oShow = ref(false);
    const changeVisible = () => {
      oShow.value = !oShow.value;
    };
    const sssss =(command:any)=>{
      context.emit("command", command);
      console.log(222, command)
    }
    return { oShow, changeVisible, sssss };
  },
});
</script>

<style lang="less"></style>
